<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html><head lang="en">
<meta http-equiv="content-type" content="text/html;charset=utf-8"><title>Documentación para el Theme BlueBubble 3.5 para Wordpress</title>

<!-- Framework CSS -->
<link rel="stylesheet" href="assets/blueprint-css/screen.css" type="text/css" media="screen, projection">
<link rel="stylesheet" href="assets/blueprint-css/print.css" type="text/css" media="print">
<!--[if lt IE 8]><link rel="stylesheet" href="assets/blueprint-css/ie.css" type="text/css" media="screen, projection"><![endif]-->
<link rel="stylesheet" href="assets/blueprint-css/plugins/fancy-type/screen.css" type="text/css" media="screen, projection">
<style type="text/css" media="screen">
p, table, hr, .box { margin-bottom:25px; }
.box p { margin-bottom:10px; }
.titlebar {height:30px; background:#333;margin: 0 0 20px 0; text-align:center;}
.lang {display:inline-block;height:25px; width:80px; margin:4px 0 0 0;color:#fff;} .lang a {color:#fff;} </style>
</head>
<body>
<div class="titlebar">
<div class="lang"><a href="../en/index.html">English</a></div>
<div class="lang"><strong>Español</strong></div>
</div>
<div class="container">
<h3 class="center alt">“BlueBubble v3.5 Theme para
Wordpress” Documentación por “<a href="http://algo.dosmundoscafe.com" title="Go to imaginalgo website." target="_blank">imaginalgo</a>”</h3>
<hr>
<h1 class="center">“BlueBubble v3.5 Theme para Wordpress”</h1>
<div class="borderTop">
<div class="span-6 colborder info-top prepend-1">
<p class="prepend-top"> <strong> Creado: 11 november,
2011<br>
Por: <a href="http://algo.dosmundoscafe.com" title="Vaya al sitio de imaginalgo." target="_blank">imaginalgo</a><br>
Apoyo: <a href="http://bluebubble.dosmundoscafe.com/free-theme-bluebubble-v3-0/" target="_blank">Apoyo BlueBubble</a> </strong> </p>
</div>
<!-- end div .span-6 -->
<div class="span-12 last">
<p class="prepend-top append-0">Gracias por tu interés en
BlueBubble para Wordpress. Aprovecha varias funciones de
Wordpress 3.0 como: MultiSitios, Encabezados Personalizados, y el nuevo
sistema de navegación. Todo esto mientras conservando el estilo
original de las versions anteriores. Fácil instalar y fácil usar –
ojalá que te guste.
</p>
</div>
</div>
<!-- end div .borderTop -->
<hr>
<h2 id="toc" class="alt">Contenidos</h2>
<ol class="alpha">
<li><a href="#new">Lo Nuevo</a></li>
<li><a href="#features">Funciones de BlueBubble</a></li>
<li><a href="#install">Como instalar BlueBubble</a></li>
<li><a href="#optionspanel">Opciones de BlueBubble</a></li>
<li><a href="#portfolioblog">Establecer el
Portafolio y Blog</a></li>
<li><a href="#contact">Formulario de Contacto</a></li>
<li><a href="#styles">Styles</a></li>
<li><a href="#other">Otras Opciones</a></li>
<li><a href="#portprojects">Proyectos del
Portafolio</a></li>
<li><a href="#faqs">Ayuda y Preguntas Frecuentes</a></li>
<li><a href="#credits">Créditos</a></li>
</ol>
<hr>
<h3 id="new"><strong>A) Lo Nuevo</strong> - <a href="#toc">contenidos</a></h3>
<p>Lo siguiente es una lista de cambios, reparaciones y novedades
en versión. 3.5:</p>
<ul>
<li>All-new Theme Options panel with many new options.</li>
<li>Added option to upload Favicon or Logo from Theme Options.</li>
<li>Replaced <strong>Shortcodes</strong> with <strong>Styles</strong>.</li>
<li>New Portfolio layouts - 2 and 3 column with sidebar, 3 and
4 column full page.</li>
<li>Hover overlay for portfolio images.</li>
<li>New Custom Meta boxes for portfolio items - <strong>date</strong>
and <strong>link</strong>.</li>
<li>New Contact Form with custom error and success messages.</li>
<li>Removed all color schemes except for Default and Dark.</li>
<li>Updated Comments Form with new Twitter field.</li>
</ul>
<p class="alert">As of version 3.5, the BlueBubble update
notice has been moved. Notices will now appear under Dashboard, below
the Updates notice.</p>
<hr>
<h3 id="features"><strong>B) Funciones de BlueBubble</strong>
- <a href="#toc">contenidos</a></h3>
<p>Gracias por tu interés en BlueBubble para Wordpress. Este
theme ha sido numerado 3.0 po su compatibilidad con Wordpress 3.0.
Aprovecha varias funciones de Wordpress 3.0 como: MultiSitios,
Encabezados Personalizados, y el nuevo sistema de navegación. Esta
funcionalidad ya está incluida y no es necesario cambiar nada en el
documento functions.php.</p>
<p>Además, hay varias cosas nuevas en esta versión, como: un
Panel de Control con muchas opciones, 7 combinaciones de colores, un
Lightbox para los artículos en el portafolio, la capacidad de mandar a
Twitter cualquiera publicación y una sección con datos del autor con
sus publicaciones.</p>
<p>Todo esto mientras conservando el estilo original de las
versions anteriores. Fácil instalar y fácil usar – ojalá que te guste.</p>
<p>Sinceramente,</p>
<p class="append-bottom alt large"><strong>Thomas
Veit y Mike Walsh</strong></p>
<hr>
<h3 id="install"><strong>C) Como instalar BlueBubble</strong>
- <a href="#toc">contenidos</a></h3>
<p class="info">El proceso de instalación ahora es
automático en versión 3.5! Cuando por primera vez activas el Theme, las
páginas <strong>Blog</strong>,
<strong>Portafolio</strong>, and <strong>Contacto</strong>
se crearán automáticamente, además de los menús <strong>Main,
Top, Footer</strong> y <strong>404</strong>!
Se puede saltar ls pasos que siguen y simplemente ir ala página <strong>Ajustes
&gt; Lectura</strong> y elige Portafolio como la página
inicial. <strong>NO NO NO</strong> cambies la página de
entradas. Ahora sigue a la <a href="#optionspanel">Opciones
de BlueBubble</a>.<br>
<br>
Sin embargo, si tienes un problema, lee el siguiente: </p>
<p>First, make sure that you have Wordpress 3.0 or later
installed. After installing Wordpress on your server, upload or copy
the <strong>bluebubble</strong> folder to the
wp-contents/themes directory. Once this is done...</p>
<ol>
<li>Ingresar a tu cuenta de Wordpress como administrador y
activar el theme BlueBubble. (en Wordpress 3.0, si estás usando
MultiSitio, acuérdate de que primero hay que "permitir" el theme en el
panel del Súper Administrador y no aparecerá como opción)</li>
<li>Crea una<strong> página.</strong> Dale el
nombre "Portada" o lo que deseas. Ésta será la primera página, la que
los visitantes ven por omisión. Luego, en <strong>Atributos de
la Página</strong>, donde dice <strong>Plantilla</strong>,
elige <strong>Portafolio</strong>.</li>
<li>Crea otra <strong>página</strong>. Dale el
nombre "Blog" o lo que deseas. En <strong>Atributos de la Página</strong>,
donde dice <strong>Plantilla</strong>, elige<strong>
Blog</strong>.</li>
<li>Si te gustaría usar el formulario de contacto (con
verificación de JavaScript y un mensaje de gracias al mandar el correo)
simplemente crea una página nueva y dale el nombre Contacto o lo que
quieres. Luego, en <strong>Atributos de la Página</strong>,
donde dice <strong>Plantilla</strong>, elige<strong>
Contacto.</strong></li>
<li>Ahora vaya a Opciones -&gt; Lectura y elige la página
que creaste en Nº 2 como la página inicial.
<strong><span class="highlight">Note: cambies la
página de entradas.</span></strong></li>
<li>Ahora, vaya a <strong>Artículos -&gt; Categoría</strong>s
y haga dos categorías nuevas. Se puede nombrar Portada y Blog, pero
puedes nombrarlas lo que deseas. Estas categorías van a dirigir tus
publicaciones a las páginas creadas en Nº 2 y Nº 3 con artículos.</li>
<li>Para crear la <strong>Navegación Principal</strong>:
<ul>
<li>Vaya a <strong>Diseño -&gt; Menús</strong>.
Donde dice Nombre del Menú, escribe un nombre – lo que quieres. Aprieta
<strong>Guardar Menú.</strong></li>
<li>Para hacerte la vida más fácil, marcar donde dice <strong>Añadir
automáticamente las páginas de nivel superior.</strong></li>
<li> A la izquierda puedes ver Ubicación del theme: <em>Tu
tema soporta 4 menús</em>. Selecciona qué menú quieres utilizar
en cada posición, elige el nombre que hiciste en <strong>a</strong>.</li>
<li>Debajo de esto encontrarás donde dice Páginas. Marc
alas páginas que quieres que aparezcan en el menu, y luego aprieta <strong>Añadir
al menú</strong>. Puedes cambiar el orden de las páginas,
arrastrándolas y dejándolas donde deseas.</li>
</ul>
</li>
<li>8. BlueBubble también permite la creación de un menú
sencillo en el pie del sitio. Para hacer esto, sigue las instrucciones
en Nº 7, pero donde dice Nombre del Menú, escribe el nombre que deseas.</li>
<li>9. Además, BlueBubble tiene una página de error 404 que
ayuda a los visitants perdidos quedarse en tu sitio. Simplemente seguir
las instrucciones en Nº 7, pero nombra el menú <strong>404</strong>.
(o algo diferente)</li>
<li>Finalmente, busca la opción en el menú a la izquierda se
llama BlueBubble. Aprieta aquí para abrir el <strong>Panel de
Opciones BlueBubble.</strong>.</li>
</ol>
<hr>
<h3 id="optionspanel"><strong>D) Opciones de
BlueBubble</strong> - <a href="#toc">contenidos</a></h3>
<p>El Panel de Opciones ha sido cambiado y rediseñado para
versión 3.3. Las mismas opciones aún están presentes, y también
encontrarás varias nuevas. Aquí es lo que verás:</p>
<img src="assets/images/optionspanel.png" alt="BlueBubble Options Panel">
<p>Each option has a detailed explanation. Some new options in
BlueBubble 3.5 include:</p>
<ul>
<li><strong>Cargador del Logo y Favicon</strong>:
Pincha un botón, elige a una imagen en tu computadora, y se cargará
directamente!</li>
<li><strong>Logo en solo Texto</strong>: Ahora
puedes eligir tener un logo de solo texto..</li>
<li><strong>Escritorio WP</strong>: ¿Piensas que
algunos de los widgets del escritorio de Wordpress son innecesarios o
irritantes? Ahora puedes eliminarlos!</li>
<li><span style="font-weight: bold;">Contact Form:
</span>Se han cambiado el formulario de contacto y el mensaje
que se envia en esta versión de BlueBubble. Si hay un error en unos de
los campos, un mensaje de error en general aparecerá, y un mensaje
específico se verá en el campo correspondente. También se puede
personalizar estos mensajes de error y de gracias desde el panel de
control.</li>
</ul>
<hr>
<h3 id="portfolioblog"><strong>E) Establecer el
Portafolio y Blog</strong> - <a href="#toc">contenidos</a></h3>
<p class="info">Como el proceso de crear las páginas y
menús en este versión de BlueBubble es automático, la mayoría de lo que
sigue ya no es necesario. Sin embargo, se quedará para referencia, si
tal vez sean necesarios.<br>
<br>
Para establecer el Portafolio, vaya a <span style="font-weight: bold;">Theme
Options &gt; Portafolio</span> y elegir la categoría que
deseas usar para el Portafolio. Luego, vaya a <span style="font-weight: bold;">Theme Options &gt;Blog and
Entradas y elielegir la categoría que deseas usar para el </span>Blog.&nbsp;<br>
<br>
Después puedes continuar a la sección,&nbsp;<a href="#contact">Formulario
de Contacto y Sitios Sociales</a>.</p>
<p>Esta sección es bastante simple. ¿Recuerdes cuando creaste la
página Portada y las categorías en sección 2.5? Si hiciste esto, se van
a aparecer en los menús aquí. Aquí se conectan las páginas hechas en
secciones 2.2 y 2.3 con las categorías en sección 2.5.</p>
<p>La casilla es muy fácil de entender – si no quieres que te
dejen comentarios, marca la casilla. (<strong>Nota</strong>:
Este no afectará la sección de Blog)</p>
<p>Si no quieres que las visitantes dejen comentarios en las
páginas del portafolio, marcar la opción que se encuentre aquí. (<strong>Nota</strong>:
Esta opción no afecta los comentarios en la sección del Blog)</p>
<p>Se puede indicar también cuantos artículos necesitan por
página. Si no escribes nada, cada página de la sección del portafolio
mostrará 6 artículos y automáticamente creará más páginas si existen
más que 6 artículos.</p>
<hr>
<h3 id="contact"><strong>F) Formulario de Contacto y
Sitios Sociales</strong>
- <a href="#toc">contenidos</a></h3>
<p>Ahora se puede personalizar los mensajes de eror y de gracias
en el formulario de contacto de BlueBubble. Vaya a <span style="font-weight: bold;">Apariencia
&gt; Theme Options &gt; Formulario Contacto</span> y
escribe los mensajes que quieres.
No olvites ingresar una dirección de correo electrónico donde quieres
recibir las mensajes. Si no ingresas nada los correos enviados desde el
formulario llegarán al correo del administrador del sitio.</p>
<p>Debajo de la pestaña<span style="font-weight: bold;">
Formulario de Contacto</span> en Theme Options, se puede pinchar <span style="font-weight: bold;">Icones Social</span>. Si
quieres ingresar un enlace a un sitio social, como Twitter, sigue estas
instrucciones:</p>
<ol>
<li>1. Marca donde dice <strong>Muestra Sección de
Sitios Sociales</strong>.</li>
<li>2. Ahora agrega el enlace complete a tu sitio. (Ej: Si el
nombre de usuario de tu Twitter fuera <strong>donjuan</strong>,
ingresarías <strong>http://www.twitter.com/donjuan</strong>
en el campo de Twitter) El ícono aparecerá en el fondo de la columna de
la izquierda, como muestra el imagen aquí.</li>
</ol>
<p class="update">Ahora hay 2 opciones nuevas aquí en
BlueBubble
3.5: Google+ y Dribble</p>
<p>Hay apoyo para los siguientes sitios: <strong>Google+,
Dribble, Facebook, Twitter, LinkedIn, Delicious, Digg, DeviantArt,
MySpace, Evernote, Flickr, Netvibes, Orkut, Reddit, ShareThis,
StumbleUpon, Technorati,</strong> y <strong>Tumblr</strong>.</p>
<hr>
<h3 id="styles"><strong>G) Styles</strong>
- <a href="#toc">contenidos</a></h3>
<p>En versiones anteriores de BlueBubble, se podía crear <span style="font-weight: bold;">Botones</span> y cuadros de
<span style="font-weight: bold;">Alerta</span>, <span style="font-weight: bold;">Información</span>, <span style="font-weight: bold;">Ideas</span> or <span style="font-weight: bold;">Descargar</span>
utilizando Código Corto. El único problema con esto es si el usuario
luego cambió el Theme de BlueBubble a otro, se quedaron los
códigos [shortcode][/shortcode].</p>
<p>In BlueBubble 3.5, lo que está de moda son precisamente los
Códigos Cortos. Pero aquí se van en favor a Styles. Este cambio te
permite a crear los <span style="font-weight: bold;">Botones</span>
y cuadros de <span style="font-weight: bold;">Alerta</span>,
<span style="font-weight: bold;">Información</span>,
<span style="font-weight: bold;">Ideas</span> or <span style="font-weight: bold;">Descargar</span> como
antes, pero sin el&nbsp;[shortcode][/shortcode] feo e innecesario.
Además hay un botón nuevo - <span style="font-weight: bold;">Gris</span>
y ahora también se puede establecer columnas dentro de una página o
entrada. &nbsp;A lo breve se explica aquí:</p>
<ol>
<li><strong>Crear una nueva Página o Entrada</strong>:
<p>Primero necesitas crear una nueva Entrada. En eleditor hay
una linea de botones así:</p>
<img src="assets/images/editor-bar.png" alt="BlueBubble Options Panel">
<p>Si solo veas una linea de botones, debes pinchar
el&nbsp;último
- Ver/Ocultar Botones Adicionales - para mostrar la segunda lnea. El
primer menú se llama Styles.</p>
</li>
<li><strong>Aplicar Styles</strong>:
<p>Si te gustaría crear un botón por ejemplo, primero
destacar el texto en el editor. Luego, pincha el menú desplegable
Styles y elige el color del botón que quieres. Automaticamente se
aplicará los estilos. Después, se puede colocar un enlace a un lugar en
el botón!</p>
<img src="assets/images/styles-help.png" alt="BlueBubble Options Panel">
</li>
</ol>
<hr>
<h3 id="other"><strong>G) Otras Opciones</strong>
- <a href="#toc">contenidos</a></h3>
<p>Además de las opciones ya mencionadas, hay otras opciones que
ayudan a mejorar tu experiencia con el theme BlueBubble. </p>
<p><strong>Logo Personalizado:</strong> Para
reemplazar el log de BlueBubble con tu propio, carga un logo desde la
opción Media, copia la dirección URL y pegarla en este campo.</p>
<p><strong>Favicon Personalizado:</strong> Mismo
proceso como el anterior. <strong>Nota</strong> – el
Favicon debe ser en formato .ico, aunque algunos navegadores también
utilizan .png.</p>
<p><strong>Favicon Personalizado:</strong> Mismo
proceso como el anterior. <strong>Nota</strong> – el
Favicon debe ser en formato .ico, aunque algunos navegadores también
utilizan .png.</p>
<p><strong>Campos del Usuario Personalizados:</strong>
BlueBubble ha agregado unos campos nuevos a los que vienen por omisión
en Wordpress.</p>
<p><strong>Perfil del Autor:</strong> Desde la
sección del Blog uno se puede apretar el nombre del autor par aver una
sección aparte que contiene la información del perfil del autor y una
lista de su publicaciones.</p>
<p><strong>Foto del Autor Personalizada:</strong> Es
possible usar un Plugin de Wordpress para permitir que usuarios cargan
sus propias fotos de perfil, pero hay otra manera también. Carga una
foto a la carpeta <strong>wp-content/themes/BlueBubble/images/authors/</strong>
con el mismo nombre como tu número de usuario, y en formato .jpg Por
ejemplo, el administrador, quien tiene un número de usuario <strong>1</strong>
cargaría el imagen 1.jpg. EL tamaño ideal del imagen es 100x100.</p>
<hr>
<h3 id="portprojects"><strong>I) Proyectos del
Portafolio</strong> - <a href="#toc">contenidos</a></h3>
<p>Si ya seguiste las instrucciones anteriores, es súper fácil
agregar un artículo al portafolio. Mire:</p>
<ol>
<li>Vaya a <strong>Artículos -&gt; Agregar</strong>.</li>
<li>Escribe una descripción y un título ara el artículo. Luego
aprieta <strong>Subir/Insertar</strong>.</li>
<li>Selecciona el imagen que quieres para el portafolio y
cárgala. El theme BlueBubble automáticamente corta la foto grande y
pequeña.</li>
<li>Después de cargarla se puede agregar un título y otras
opciones. Al fondo de la página que aparece cuando termina de subir la
foto, tienes que apretar el enlace <strong>usar como imagen
relacionada</strong>. (No tiene que apretar Insertar en el
artículo)</li>
</ol>
<p>Si tienes dificultades o problemas con el portafolio o blog,
favor de leer el document de ayuda correspondiente que vino con el
theme.</p>
<hr>
<h3 id="faqs"><strong>J) Ayuda y Preguntas Frecuentes</strong>
- <a href="#toc">contenidos</a></h3>
<p>Está sección tiene algunas de las preguntas más frecuentes que
recibo. Por favor lea esta sección antes de preguntar algo ya
contestado aquí!</p>
<ul>
<li><strong>¿Por qué no aparece la nueva sección de
información del autor sobre su publicaciones?</strong>
Para activar esta sección es necesario rellenar la sección Información
biográfica en tu perfil.</li>
<li><strong>¿Cómo se asigna una foto para los comentarios
y publicaciones?</strong>
Para mostrar una foto en estas secciones es necesario tener una cuenta
gratis con el servicio gravatar.
</li>
<li><strong>¿Qué es un gravatar?</strong>
Un gravatar es un Avatar Global. En otras palabras, el imagen pequeña
que aparece al lado de comentarios y publicaciones en Blogs en todo el
internet. Para obtener uno, vaya al sitio <a href="http://www.gravatar.com" target="_blank">http://www.gravatar.com</a>.
Hay que registrar tu correo electrónico, y luego puedes subir una foto
</li>
<li><strong>Ya lo hice y aún no funciona.</strong>
Asegúrate que el correo electrónico que registraste con Gravatar es el
mismo que estás usando para dejar a un comentario.
</li>
<li><strong>Soy el autor de una publicación en
BlueBubble, pero cuando dejo un comentario o responde a otro usuario,
no se ve mi comentario en el color especial.</strong>
Antes de dejar el comentario, es necesario que ingresaras a tu cuenta.
</li>
<li><strong>¿Cómo cambio el theme BlueBubble a
inglés/español?</strong>
Primero, es necesario tener Wordpress instalado en Inglés/Español O
tener los documentos de idiomas correspondientes. (lea sobre esto en el
sitio Wordpress.org) Después de hacer esto, vaya a Opciones
=&gt;General. La última opción permite cambiar el idioma. Elige lo
que quieres.
</li>
</ul>
<hr>
<h3 id="credits"><strong>K) Créditos</strong>
- <a href="#toc">contenidos</a></h3>
<p>Fue muy entretenido trabajar con este theme y agregar nuevas
funciones a un theme ya conocido como simplemente maravilloso. Pero no
pudiera hacerlo con my propio fuerza y conocimiento. Por eso, quiero
agradecer las siguientes Fuentes de ayuda e inspiración:</p>
<ul>
<li>La paciencia de mi esposa.</li>
<li>La abundancia de mi café</li>
<li>The music of Silvio Rodríguez, which kept me company many a
long night</li>
<li><a href="http://www.wordpress.org" target="_blank">Wordpress</a>
por un programa maravilloso…especialmente con versión 3.0!</li>
<li><a href="http://www.iconspedia.com/icon/error-1168.html" target="_blank">Iconspedia</a>, por el ícono usado el
la página del error 404.</li>
<li><a href="http://www.thomasveit.com" target="_blank">Thomas Veit</a>, por crear el theme
original BlueBubble para Wordpress. Simple y elegante. Vea lo que
ofrece en su sitio: (inglés)</li>
<li>NetTuts, por un tutorial exelente sobre el arte de crear un
Panel Avanzado para Wordpress. <a href="http://net.tutsplus.com/tutorials/wordpress/how-to-create-a-better-wordpress-options-panel/" target="_blank">Panel Avanzado para Wordpress</a>
(inglés)</li>
<li>NetTuts de nuevo, esta vez por un tutorial sobre <a href="http://net.tutsplus.com/tutorials/php/404403-website-error-pages-with-php-auto-mailer/" target="_blank">como crear una página de error 404</a>.
(inglés)</li>
<li><a href="http://www.woothemes.com/2009/09/woofunction/" target="_blank">WooThemes</a>, por los íconos que
ofrecen. La ampolleta es el ícono usado en el Panel de BlueBubble.
(inglés)</li>
<li><a href="http://www.malistudio.hr/" target="_blank">Mali Studio</a>, por su solución para
el error en la página de portafolio que no mostraría más que una página
de artículos.</li>
<li><a href="http://www.woothemes.com" target="_blank">WooThemes</a>,
por su solución para el error en la página de portafolio que no
mostraría más que una página de artículos. Visita su sitio aquí:</li>
</ul>
<hr>
<p>De nuevo muchas gracias por descargar y usar este theme. Debes
sentirte libre hacer cualquier consulta en el <a href="http://bluebubble.dosmundoscafe.com/free-theme-bluebubble-v3-0/" target="_blank">Foro de apoyo BlueBubble</a>.</p>
<p class="append-bottom alt large"><strong>imaginalgo</strong></p>
<p><a href="#toc">Volver a los Contenidos</a></p>
<hr class="space"></div>
<!-- end div .container -->
</body></html>